<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 
    事件的基本使用：
      1. 使用v-on:xxx 或 @xxx绑定事件，其中xxx是事件名；
      2. 事件的回调需要配置在methods对象中，最终会在vm上；
      3. methods中配置的函数，不要用箭头函数！否则this就不是vm了；
      4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
      5. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
   -->
  <div id="root">
    <button v-on:click="showInfo">点击1{{name}}</button>
    <button @click="showInfo2(1)">点击2{{name}}</button>
    <button @click="showInfo3(1, $event)">点击3{{name}}</button>
    <button @click="showInfo4($event, 1)">点击4{{name}}</button>
  </div>
  <script>
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示。
    const vm = new Vue({
      el: "#root",
      data: {
        name: "名字"
      },
      methods: {
        showInfo(event) {
          console.log(event.target.innerText)
          // console.log(this) // 此处的this是vm
        },
        showInfo2(num) {
          console.log(num, event)
        },
        showInfo3(num, event) {
          console.log(num, event)
        },
        showInfo4(event, num) {
          console.log(event, num)
        }
      }
    })
  </script>
</body>
</html>